<template>
	<div class="userTask w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}的课程列表</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listTwo advise" @click="userLubo">录播课程</a>
				<a class="listTwo advise" @click="userLive">直播课程</a>
				<a class="listTwo advise" @click="knowMap">知识地图</a>
				<a class="listTwo advise" @click="courseHomework">学员作业</a>
				<a class="listOne">学习任务</a>
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_2"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入关键词……" v-model="search"/>
					<a @click="getPageSearch"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="55">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="courseName" label="课程名称"></el-table-column>
				<el-table-column prop="lecturerName" label="讲师" width="100"></el-table-column>
				<el-table-column prop="pColumnName" label="一级分类" width="100"></el-table-column>
				<el-table-column prop="cColumnName" label="子分类" width="100"></el-table-column>
				<el-table-column label="学习数据" width="100">
					<template slot-scope="scope">
						<el-button @click="handleData(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
				<el-table-column label="状态" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.status==1">待学习</span>
						<span v-if="scope.row.status==2">学习中</span>
						<span v-if="scope.row.status==3">已完成</span>
						<span v-if="scope.row.status==-1">未发布</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default{
		data(){
			return{
				sort:'',
				updateTitle:'',
				userId:'',
				sort:'',
				search:'',
				tableData:[],
				searchSelect:[],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                },
				pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods:{
			getParams() {
				this.userId = this.$route.params.userId;
				this.updateTitle = this.$route.params.updateTitle;
				this.dataId = this.$route.params.dataId;
				this.identity = this.$route.params.identity;
			},
			getTableList(){
				let that = this;
				this.$ajax({
					url: this.$root.jifuUrl + "/getUserPlatformCompulsuryCoursePage?" +'page='+this.currentpage +'&num='+this.pagesize + '&userid=' + this.userId+'&columnid='+this.searchSelect,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			userLubo(){
				this.$router.push({
					name: 'soTeacher',
					params: {
						userid: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			userLive(){
				this.$router.push({
					name: 'userLive',
					params: {
						userid: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			knowMap(index,row){
				this.$router.push({
					name: 'userKnowledgeMap',
					params: {
						userId: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			courseHomework(){
				this.$router.push({
					name: 'userHomework',
					params: {
						userId: this.userId,
						updateTitle:this.updateTitle,
						identity:1,
						dataId:this.dataId
					}
				})
			},
			handleData(row){
				this.$router.push({
					name: 'userStudyData',
					params: {
						userId: this.userId,
						peopleTitle:this.updateTitle,
						updateTitle:row.courseName,
						courseid:row.courseid
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				})
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getPageSearch(){
				this.currentpage=1;
				this.getTableList();
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
			reBack(){
				this.$router.push({
					name:'userManager',
					params: {
						identity:1,
						dataId:this.dataId
					}
				})
			},
			getColumnList(){
				let columnType = [1];
				this.$rootFunction().columnList({columnType});
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted(){
			this.getParams();
			if(this.userId==null){
				this.$store.commit('GET_USERuserHomework');
				var s =this.$store.state.userHomework;
				this.userId=s.userId;
				this.updateTitle=s.updateTitle;
				this.identity = s.identity;
				this.dataId = s.dataId
			};
			this.getTableList();
			this.getColumnList();
			window.addEventListener("beforeunload",()=>{
				s={
					userId:this.userId,
					updateTitle:this.updateTitle,
					dataId:this.dataId,
					identity:this.identity
				};
				this.$store.commit('SET_USERuserHomework', s);
			});
		}
	}
</script>

<style>
	.userTask .advise{border: 1px solid #44CEF6;box-sizing: border-box;margin-right: 10px;}
	.userTask .el-tabs-report a.listOne{position: relative;top: -1px;}
</style>